<template>
  <div>
    <el-form inline :model="searchForm">
      <el-form-item>
        <el-input v-model="searchForm.name" clearable placeholder="商品名"></el-input>
      </el-form-item>
      <el-form-item>
        <template>
          <el-select v-model="searchForm.shopId" filterable placeholder="请选择商铺" clearable @change="getAllCabinet" style="width: 300px">
            <el-option
              v-for="(item,index) in allShopList"
              :key="index"
              :label="item.address+'/'+item.shopName"
              :value="item.shopId">
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item>
        <template>
          <el-select v-model="searchForm.cabinetId" filterable placeholder="请选择货架" clearable>
            <el-option
              v-for="(item,index) in allCabinetList"
              :key="index"
              :label="item.number"
              :value="item.cabinetId">
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList">查询</el-button>
        <el-button type="primary" @click="showDialog()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border>
      <el-table-column prop="goodsId" label="编号" align="center" header-align="center" width="60"/>
      <el-table-column prop="name" label="商品名" align="center" header-align="center" width="100" show-overflow-tooltip/>
      <el-table-column prop="getPrice" label="进价(元)" align="center" header-align="center"/>
      <el-table-column prop="salePrice" label="售价(元)" align="center" header-align="center"/>
      <el-table-column prop="goodsTime" label="上货时间" align="center" header-align="center" width="150"/>
      <el-table-column prop="goodsNum" label="库存" align="center" header-align="center"/>
      <el-table-column prop="status" label="状态" align="center" header-align="center">
        <template slot-scope="scope">
          <el-button title="点击更改状态" v-if="scope.row.status === 0" type="danger" size="small" @click="changeStatus(scope.row.goodsId,1)">下架</el-button>
          <el-button @click="changeStatus(scope.row.goodsId,0)" type="success" v-else size="small" title="点击更改状态">正常</el-button>
        </template>
      </el-table-column>
      <el-table-column label="查看" align="center" header-align="center" fixed="right" width="300">
        <template slot-scope="scope">
          <el-button size="small" @click="ShowProspec(scope.row.prospecId)">规格</el-button>
          <el-button size="small" @click="ShowTypeList(scope.row.goodsId)">类型</el-button>
          <el-button size="small" @click="ShowMessage(scope.row.cabinetId)">位置</el-button>
          <el-button size="small" @click="ShowImageList(scope.row.goodsId)">图片</el-button>
          <el-button size="small" @click="ShowSalesList(scope.row.goodsId)">销售记录</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center" fixed="right" width="160">
        <template slot-scope="scope">
          <el-button size="small" @click="showDialog(scope.row.goodsId)">修改</el-button>
          <el-button size="small" @click="deleteInfo(scope.row.goodsId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="pageIndex" :page-size="pageSize" :total="totalPage" :page-sizes="[5,10,15,20,25,30]" layout="total,sizes,prev,pager,next,jumper" @current-change="currentChange" @size-change="sizeChange"></el-pagination>
    <ShowType ref="showType2"></ShowType>
    <ShowSpec ref="spec2"></ShowSpec>
    <ShowMessage ref="showMessage2"></ShowMessage>
    <picture-view :showpage="true" :url-list="imageList"
                  :on-close="closeViewer" v-if="showViewer"></picture-view>
    <GoodsAddOrUpdate ref="goodsAddOrUpdate2" @onCloseWin="getDataList"></GoodsAddOrUpdate>
    <ShowSales ref="showSales2"></ShowSales>
  </div>
</template>

<script>
import ShowType from '@/views/goods/ShowType'
import ShowSpec from '@/views/goods/ShowSpec'
import ShowMessage from '@/views/goods/ShowMessage'
import PictureView from '@/views/goods/PictureView'
import GoodsAddOrUpdate from '@/views/goods/GoodsAddOrUpdate'
import ShowSales from '@/views/goods/ShowSales'
export default {
  components: {
    ShowType,
    ShowSpec,
    ShowMessage,
    PictureView,
    GoodsAddOrUpdate,
    ShowSales
  },
  data () {
    return {
      searchForm: {
        name: '',
        shopId: '',
        cabinetId: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false,
      showViewer: false,
      imageList: [],
      allShopList: [], /* 所有超市的list */
      allCabinetList: []/* 所以货架的list */
    }
  },
  methods: {
    getDataList () {
      this.dataListLoading = this.$loading({ text: '加载表格...' })
      this.$http.get('/goods/list', {
        page: this.pageIndex,
        limit: this.pageSize,
        ...this.searchForm
      }).then(data => {
        this.dataListLoading.close()
        if (data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        }
      })
    },
    currentChange (val) {
      this.pageIndex = val
      this.getDataList()
    },
    sizeChange (val) {
      this.pageSize = val
      this.getDataList()
    },
    showDialog (goodsId) {
      this.$refs.goodsAddOrUpdate2.init(goodsId)
    },
    getAllShop () {
      this.$http.get('/goods/cascade/allshop').then(data => {
        if (data.code === 0) {
          this.allShopList = data.list
        }
      })
    },
    getAllCabinet () {
      this.allCabinetList = []
      this.searchForm.cabinetId = ''
      this.$http.get('/goods/cascade/mycabinet/' + this.searchForm.shopId).then(data => {
        if (data.code === 0) {
          this.allCabinetList = data.list
        }
      })
    },
    deleteInfo (goodsId) {
      this.$confirm(`确定删除编号${goodsId}的数据吗？`).then(() => {
        this.dataListLoading = this.$loading({ text: '加载表格...' })
        this.$http.delete(`/goods/delete/${goodsId}`).then(data => {
          this.dataListLoading.close()
          if (data.code === 0) {
            this.$message({
              message: '删除成功！',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$alert(data.msg, { type: 'error' }).then(() => {
              this.getDataList()
            })
          }
        })
      })
    },
    changeStatus (goodsId, status) {
      this.$confirm('确定更改状态吗？').then(() => {
        this.$http.post('/goods/status', { goodsId, status }).then(data => {
          if (data.code === 0) {
            this.$message.success('更新成功')
            this.getDataList()
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    ShowTypeList (goodsId) {
      this.$refs.showType2.init(goodsId)
    },
    closeViewer () {
      this.showViewer = false
    },
    ShowImageList (goodsId) {
      this.showViewer = true
      this.imageList = [] /* 清空图片列表 */
      this.dataListLoading = this.$loading({ text: '加载中...' })
      this.$http.get('/goods/info/' + goodsId).then(data => {
        if (data.code === 0) {
          this.dataListLoading.close()
          if (data.data.imageList.length > 0) {
            this.imageList = data.data.imageList.map(item => {
              return {
                img: process.env.VUE_APP_BASE_API + '/img/' + item.imageUrl,
                info: [{ label: '图片名字', value: item.imageUrl }]
              }
            })
          } else {
            this.$message.warning('暂无商品图片')
          }
        }
      })
    },
    ShowProspec (prospecId) {
      this.$refs.spec2.init(prospecId)
    },
    ShowMessage (cabinetId) {
      this.$refs.showMessage2.init(cabinetId)
    },
    ShowSalesList (goodsId) {
      this.$refs.showSales2.init(goodsId)
    }

  },
  created () {
    this.getDataList()
    this.getAllShop()
  }
}
</script>

<style scoped>

</style>
